HTML-страницы, содержащие обновляемые значения
Страницу необходимо разделить на разметку:
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
Температура в Москве: <span id="temperature"></span> °C
<script>
window.setData = function(data) {
document.getElementById("temperature").innerHTML = data["temperature"];
}
</script>
</body>
</html>
и данные:
{
"temperature": -14
}
Плеер будет вызывать функцию setData в контексте страницы при первом её отображении (по событию onload), а также при обновлении данных.
Страница не должна содержать ссылки на внешние ресурсы, все они должны быть упакованы вместе с ней. Данные могут содержать ссылки на внешние ресурсы, но их необходимо оформить особым образом. Например, вместо
{
"temperature": -14,
"icon": "https://yastatic.net/weather/i/icons/blueye/color/svg/ovc.svg"
}
необходимо присылать
{
"temperature": -14,
"icon": {"$playback-data-resource": "https://yastatic.net/weather/i/icons/blueye/color/svg/ovc.svg"}
}
плеер скачает внешние ресурсы себе в хранилище и заменит URI ресурса
{
"temperature": -14,
"icon": "file:///visiobox/tmp/playback-data/resources/yastatic.net/weather/i/icons/blueye/color/svg/ovc.svg"
}
Внешние ресурсы бессрочно кешируются на плеере.
Рекомендации по верстке HTML-страниц для Windows и Android
Изменение размера. Различные разрешения
Если верстка статическая могут быть проблемы вывода. В этом случае необходимо позаботится о пропорциональном размере содержимого страницы. По этому рекомендуем добавлять скрип, который будет решать данную проблему. Один из вариантов JS-скрипта:
const BASE_WIDTH = 1920;
const BASE_HEIGHT = 1080;
function resize(){
kx = window.innerWidth/BASE_WIDTH;
ky = window.innerHeight/BASE_HEIGHT;
document.body.style.webkitTransform = 'scale('+ kx + ',' + ky +')';
document.body.style.transform = 'scale('+ kx + ',' + ky +')';
}
function ready() {
window.addEventListener("resize", resize);
resize();
}
document.addEventListener("DOMContentLoaded", ready);
Несмотря на то, что в скрипте есть константы, которые рассчитанные на Full HD, вывод будет корректным даже на портретной ориентации. Это происходит из-за того, что плеер располагает объекты на сетке 1920x1080 не зависимо от ориентации. Если же Ваше устройство, другого формата, будет наблюдаться искажение если размер контента не соответствует разрешению дисплея.
ЗАМЕЧАНИЕ! для корректного форматирования вывода в скрипте нужно учитывать, что размер изменяется относительно Full HD дисплея.
Время
Если макет/приложение связан с временем, то нужно понимать, что время в браузере - это системное время устройства. На устройстве может быть неправильное время. Вопрос точности времени необходимо решать на уровне макета/приложения. Один из вариантов выполнять корректировку времени. Лучше всего настроить точное время на устройстве. Так же можно корректировать время, при вызове метода setData(), в этот метод помимо данных передается два числа: точное время в часовой зоне устройства и в UTC. Пример работы с методом:
function setData(data, now, utcNow){
console.log({data, now, utcNow});
}
Не актуальные данные
Плеер всегда выводит данные, если данные не обновляются, то берутся последние известные. Может случится так, что данные стали не актуальны, а новые не пришли (нет связи с источником или другие проблемы). В этом случае рекомендуем контролировать это, установив время жизни данных. Эту информацию можно отправлять с сервера данных или хранить заведомо известное значение в макете. Проверку можно выполнять по таймеру или при вызове функции setData().
ЗАМЕЧАНИЕ! не упускайте из виду проблему времени
Библиотеки и ресурсы
Нет никаких ограничений. При этом рекомендуем положить все необходимы ресурсы рядом с макетом, что бы ничего не грузилось по сети.
Приложения VISIOBOX (встраиваемые в маркетплейс)
Внимание! Приложения можно встроить в маркетплейс только после премодерации специалистами VISIOBOX)
Приложение VisioBox — обычная HTML-страница, содержащая функцию setData, вызываемую плееером после загрузки приложения, а так же при обновлении данных, находящихся на странице. У функции один аргумент — data, имеющий вид:
{
options: {
// Настройки приложения
color: "red",
fontSize: "14px",
username: "XiaoMi"
},
data: {
// Данные, отображаемые в приложение
profile: {
location: "Russia, Moscow"
},
repos: [
{
name: "mace"
}
]
}
}
Кроме того, приложение содержит manifest, описывающий настройки приложения и URL, с которого оно будет забирать данные.
Пример приложения:
<html>
<head>
<meta charset="utf-8" />
<script id="manifest" type="application/json">
{
"name": "example",
"version": 1,
"title": "Пример приложения",
"description": "",
"options": [
{
"title": "Цвет",
"name": "color",
"type": "choice",
"options": {
"choices": [
["red", "Красный"],
["green", "Синий"]
]
},
"example": "red"
},
{
"title": "Размер шрифта",
"name": "fontSize",
"type": "text",
"options": {},
"example": "14px"
},
{
"title": "Имя пользователя GitHub",
"name": "username",
"type": "text",
"options": {},
"example": "XiaoMi"
}
],
"playback_data": {
"profile": {
"url": "'https://api.github.com/users/' .. options['username']",
"interval": 3600
},
"repos": {
"url": "'https://api.github.com/users/' .. options['username'] .. '/repos'",
"interval": 300
}
},
"preview": {
"width": 1920,
"height": 1080
}
}
</script>
</head>
<body>
<div id="text"></div>
<script>
var div = document.getElementById("text");
window.setData = function(data) {
div.style.color = data.options.color;
div.innerHTML = 'Привет, я живу в ' + data.data.profile.location + ' и работаю над ' + data.data.repos[0].name;
}
</script>
</body>
</html>
Отладка приложений
Добавляем перед </body> следующий код:
<script id="application-debug" src="https://testing.visiobox.cloud/utils/application-debug.js" data-access-token="YGc7uf5Agi5LRc6yaE8dcQIuZh0HCX7g"></script>
После загрузки страницы вызовется функция setData с нужными параметрами. Можно переопределять настройки приложения по-умолчанию:
<script id="application-debug" src="https://testing.visiobox.cloud/utils/application-debug.js" data-access-token="YGc7uf5Agi5LRc6yaE8dcQIuZh0HCX7g" data-options='{"username": "torvalds"}'></script>
RSS
Пример приложения, использующего RSS
<html>
<head>
<meta charset="utf-8" />
<script id="manifest" type="application/json">
{
"name": "rss-example",
"version": 1,
"title": "Пример приложения, выводящего новости из RSS",
"description": "",
"options": [
{
"title": "URL",
"name": "url",
"type": "url",
"options": {},
"example": "http://static.feed.rbc.ru/rbc/logical/footer/news.rss"
}
],
"playback_data": {
"url": "options['url']",
"format": "rss",
"interval": 300
},
"preview": {
"width": 1920,
"height": 1080
}
}
</script>
</head>
<body>
<div id="text"></div>
<script>
var div = document.getElementById("text");
window.setData = function(data) {
var s = "";
for (var i = 0; i < data.data.entries.length; i++)
{
s += '<h1>' + data.data.entries[i].title + '</h1>' + (data.data.entries[i].summary || "");
}
div.innerHTML = s;
}
</script>
</body>
</html>
Анимации (опция актуальна при необходимости запустить анимацию в момент старта показа HTML)
Приложения загружаются плеером за несколько секунд до того, как они будут отображены на экране, чтобы всё успело загрузиться. Если в приложении есть какие-то анимации, их нужно запускать не при открытии страницы, а при получении события visio-ready:
<html>
<head>
<script>
window.addEventListener('visio-ready', function() {
document.body.style.backgroundColor = '#ff0000';
});
</script>
</head>
<body style="background-color: #000000;">
</body>
</html>
Отчёты о воспроизведении
Для того, чтобы прикрепить какие-то данные в отчёт о воспроизведении, можно использовать функцию setOutput:
setOutput("scene_1")
Пример: есть HTML в котором содержится множество сцен. Каждая сцена запускается в зависимости от условий триггеров которые заложены в логику макета. Для того чтобы вести учет стстистики воспроизведения каждой сцены, для одной передавать setOutput("scene_1") для другой setOutput("scene_2") и тд (по количеству сцен)